<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D变换效果</title>
		<style>
			/* 对所有div进行统一样式设置 */
			div {
				width: 200px; /* 宽200px */
				height: 200px; /* 高200px */
				border: 5px solid #f00; /* 边框5px实线红色 */
				font-size: 80px; /* 文字大小 */
				text-align: center; /* 文字水平对齐方式:居中 */
				line-height: 200px; /* 设置行高与div一样高,文字垂直居中 */
				margin: 50px auto; /* 外间距:上下50px 左右自动居中 */
			}
			/* 水平位移:指元素在x轴方向上移动 */
			.t1 {
				transform: translateX(100px); /* 正数向右移 */
			}
			.t2 {
				transform: translateX(0px);/* 0位置不动 */
			}
			.t3 {
				transform: translateX(-100px);/* 负数向左移 */
			}
			/* 垂直位移:指元素在Y轴方向上移动 */
			.t4 {
				transform: translateY(100px); /* 正数向下 */
			}
			.t5 {
				transform: translateY(0);
			}
			.t6 {
				transform: translateY(-100px); /* 负数向上 */
			}
			/* 在平面上围绕自己的中心点旋转 */
			.t7 {
				transform: rotate(45deg); /* 正数顺时针转 */
			}
			.t8 {
				transform: rotate(0);
				transform: rotate(360deg);
			}
			.t9 {
				transform: rotate(-45deg); /* 负数逆时针转 */
			}
			.t10 {
				transform: scaleX(1);
			}
			/* 内容水平翻转--左右 */
			.t11 {
				transform: scaleX(-1);
			}
			/* 内容垂直翻转--上下 */
			.t12 {
				transform: scaleY(-1);
			}
		</style>
	</head>
	<body>
		<!-- .t*3 -->
		<!-- 水平位移 -->
		<div class="t1">1</div>
		<div class="t2">2</div>
		<div class="t3">3</div>
		<hr>
		<!-- 垂直位移 -->
		<div class="t4">4</div>
		<div class="t5">5</div>
		<div class="t6">6</div>
		<hr>
		<!-- 元素2D旋转 -->
		<div class="t7">7</div>
		<div class="t8">8</div>
		<div class="t9">9</div>
		<hr>
		<!-- 特殊效果：镜面翻转 -->
		<div class="t10">10</div>
		<div class="t11">11</div>
		<div class="t12">12</div>
	</body>
</html>